﻿<!DOCTYPE html>
<html>
<head>
    <title>诊疗方案</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!--bootStrop css 单选框样式-->
    <link rel="stylesheet" href="resources/scripts/assets/bootstrap/css/icheck-bootstrap.css">
    <!--bootStrop css 主样式-->
    <link rel="stylesheet" href="resources/scripts/assets/bootstrap/css/bootstrap.min.css">
    <!--bootStrap table css-->
    <link rel="stylesheet" href="resources/scripts/assets/bootstrap-table/css/bootstrap-table.min.css">
    <!--jquery js-->
    <script src="resources/scripts/assets/js/jquery-2.2.3.min.js"></script>
    <!--bootStrop js-->
    <script src="resources/scripts/assets/bootstrap/js/bootstrap.min.js"></script>
    <!--bootStrap table js-->
    <script src="resources/scripts/assets/bootstrap-table/js/bootstrap-table.min.js"></script>
    <script src="resources/scripts/assets/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
    <script>
        $(function () {
            //获取页面的每个按钮
            let btns = $(".btn_active");
            //获取内容盒子
            let contents = $(".content");
            //遍历每个按钮为其添加点击事件
            for (var i = 0; i < btns.length; i++) {
                btns[i].index = i;
                btns[i].onclick = function () {
                    //对当前点击的按钮赋予active类名及显示当前按钮对应的内容
                    for (var j = 0; j < btns.length; j++) {
                        btns[j].className = btns[j].className.replace(' active', '').trim();
                        contents[j].className = contents[j].className.replace(' show', '').trim();
                    }
                    this.className = this.className + ' active';
                    contents[this.index].className = contents[this.index].className + ' show';
                };
            }

            function table1() {
                /**
                 * 可编辑表格
                 * */
                let $table = $('#table');
                let $button = $('.button');
                let $getTableData = $('.getTableData');
                $button.click(function () {
                    $table.bootstrapTable('insertRow', {
                        index: 0,
                        row: {
                            a: '',
                            b: '',
                            c: '',
                            d: '',
                            e: '',
                            f: '',
                        }
                    });
                });
                $table.bootstrapTable({
                    url: "data1.json",
                    toolbar: '#toolbar',
                    clickEdit: false,
                    showToggle: true,
                    pagination: true,       //显示分页条
                    showColumns: true,
                    showPaginationSwitch: true,     //显示切换分页按钮
                    showRefresh: true,      //显示刷新按钮
                    columns: [{
                        checkbox: true
                    },
                        {field: "a", title: "用药"},
                        {field: "b", title: "检验"},
                        {field: "c", title: "检查"},
                        {field: "d", title: "治疗"},
                        {field: "e", title: "手术"},
                        {field: "f", title: "通知"}
                    ],


                })
            }

            table1();

            function table2() {
                /**
                 * 可编辑表格
                 * */
                let $table = $('#table2');
                let $button = $('.button2');
                let $getTableData = $('.getTableData2');
                $button.click(function () {
                    $table.bootstrapTable('insertRow', {
                        index: 0,
                        row: {
                            a: '',
                            b: '',
                            c: '',
                            d: '',
                            e: '',
                            f: '',
                        }
                    });
                });
                $table.bootstrapTable({
                    toolbar: '#toolbar1',
                    clickEdit: true,
                    showToggle: true,
                    pagination: true,       //显示分页条
                    showColumns: true,
                    showPaginationSwitch: true,     //显示切换分页按钮
                    showRefresh: true,      //显示刷新按钮
                    columns: [
                        {field: "a", title: "用药",},
                        {field: "b", title: "检验"},
                        {field: "c", title: "检查"},
                        {field: "d", title: "治疗"},
                        {field: "e", title: "手术"},
                        {field: "f", title: "通知"}
                    ],
                    /**
                     * @param field 点击列的 field 名称
                     * @param value 点击列的 value 值
                     * @param row 点击列的整行数据
                     * @param $element td元素
                     */
                    onClickCell: function (field, value, row, $element) {
                        $element.attr('contenteditable', true);
                        $element.blur(function () {
                            let index = $element.parent().data('index');
                            let tdValue = $element.html();
                            saveData(index, field, tdValue);
                        })
                    }
                });
                //获取表格数据
                $getTableData.click(function () {
                    alert(JSON.stringify($table.bootstrapTable('getData')));
                });

                //保存数据
                function saveData(index, field, value) {
                    $table.bootstrapTable('updateCell', {
                        index: index,       //行索引
                        field: field,       //列名
                        value: value        //cell值
                    })
                }
            }

            table2();
        });
    </script>
    <style>
        .content {
            margin: 10px auto;
            display: none;
        }

        .content.show {
            display: block;

        }

        table tr .td {
            height: 88px;
            width: 130px;
        }
    </style>
</head>
<body>
<div class="pull-left col-md-offset-0 "
     style="position:absolute;left:40px;top:-30px;width:100px;height:20px;font-size:12px;text-decoration:underline;color:#0000CC;">
    <br/><br/><br/>
    <span style="color: #FF6600" class="glyphicon glyphicon-log-in"></span>
    <a href="单个随访组管理.html">
        <ins>返回随访组</ins>
    </a>
    <div style="position:absolute;left:561px;top:22px;width:157px;height:20px;font-size:12px;">
        <h3><strong>诊疗方案</strong></h3>
    </div>
</div>
<h6 class="page-header"></h6>
<div class="col-lg-2 text-center">
    &nbsp;<input type="button" class="btn_active btn btn-info" value="方案1" style="width: 70%">
    <br/><br/>
    <input type="button" class="btn_active btn btn-default" value="添加" style="width: 70%">
</div>
<div class="col-lg-10">
    <div class="content show">
        <!--<div id="toolbar">
            <button class="button btn btn-default">添加行</button>
            <button class="getTableData btn btn-default">获取表格数据</button>
        </div>-->
        <table class="table table-bordered" id="table"></table>
    </div>
    <div class="content">
        <div id="toolbar1">
            <button class="button2 btn btn-default">添加行</button>
            <button class="getTableData2 btn btn-default">获取表格数据</button>
        </div>
        <table class="table table-bordered" id="table2"></table>
    </div>
</div>
</body>
</html>
